<template>
  <div class="details">
    <div class="goodsTop">
      <van-nav-bar
        title="商品详情"
        left-arrow
        @click-left="onClickLeft"
        fixed
        :style="{ opacity: opacityVal }"
      />
      <van-icon
        name="arrow-left"
        color="#fff"
        :style="{ opacity: 1 - opacityVal }"
      />
    </div>
    <div class="banner">
      <div class="photo">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f90">
          <van-swipe-item v-for="item in bannerList" :key="item">
            <img :src="item" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="goodsPrice">
      <span class="currentPrice">￥{{ goods.sell_price }}</span
      ><br />
      <span class="originalPrice"
        >原价格:<b>￥{{ goods.market_price }}</b></span
      >
    </div>
    <div class="goodsText">
      <div class="text">
        <span class="goodsName ellipsis-2">{{ goods.title }}</span>
        <span class="goodsIntroduce ellipsis-1">{{ goods.briefly }}</span>
      </div>
      <div class="share">
        <span
          class="iconShare icon-fenxiang iconfont"
          @click="showShare = true"
        ></span>
        <span class="textShare">分享</span>
      </div>
      <div class="nums">
        <span>库存：999件</span>
        <span class="store_nums">销量：{{ goods.store_nums }}件</span>
      </div>
    </div>
    <div class="comments">
      <span>商品评价</span>
      <p v-if="!goods.comments">该商品还没有评价哦</p>
    </div>
    <div class="goodsInfo">
      <p>图文详情</p>
      <div v-html="goods.content"></div>
    </div>
    <div class="footer">
      <div class="toHome" @click="$router.push({ name: 'home' })">
        <span class="iconfont icon-31shouye"></span><br />
        <span>首页</span>
      </div>
      <div class="collect" @click="collect">
        <span
          class="iconfont"
          :class="!iscollect ? 'icon-shoucang' : 'icon-shoucang2'"
        ></span
        ><br />
        <span>{{ !iscollect ? "收藏" : "已收藏" }}</span>
      </div>
      <van-badge :content="countCartSelect ? countCartSelect : ''">
        <div class="cart" @click="toCart">
          <span class="iconfont icon-gouwugouwuchedinggou"></span><br />
          <span>购物车</span>
        </div>
      </van-badge>
      <div class="select">
        <span class="addCart" @click="addCart">加入购物车</span>
        <span class="nowBuy">立即购买</span>
      </div>
    </div>
    <!-- 分享 -->
    <van-cell title="显示分享面板" @click="showShare = true" />
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <!-- 添加购物车弹出层 -->
    <van-popup v-model="show" position="bottom">
      <div class="panel">
        <div class="cancel">
          <div class="iconfont icon-chacha" @click="cancel"></div>
        </div>
        <div class="goodsInfo">
          <div class="goodsImg">
            <img :src="bannerList[0]" alt="" />
          </div>
          <div class="price">
            <span>￥{{ goods.sell_price }}</span>
            <p>剩余 159 件</p>
          </div>
        </div>
        <div class="nums">
          <p>商品数量</p>
          <div class="numstotal">
            <span @click="reduce">-</span>
            <span>{{ nums }}</span
            ><span @click="add">+</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { reqDelCollectApi, reqAddCollectApi } from "@/services";
import { mapGetters, mapState, mapActions } from "vuex";
import { reqGoodsInfo } from "@/services";
import { Toast, Dialog } from "vant";
export default {
  name: "details",

  data() {
    return {
      goodsId: null,
      opacityVal: 0,
      bannerList: [],
      goods: "",
      showShare: false,
      iscollect: false,
      nums: 1,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      show: false,
    };
  },
  computed: {
    ...mapGetters(["login"]),
    ...mapState(["user"]),
    ...mapGetters(["countCartSelect"]),
  },
  mounted() {
    window.addEventListener("scroll", this.handlerScroll);
  },
  created() {
    this.countCartSelect;
    this.goodsId = this.$route.params.id;
    this.init();
  },

  methods: {
    ...mapActions(["addCartGoods"]),
    async init() {
      const res = await reqGoodsInfo(this.goodsId);
      console.log(res);
      if (res.code == 200) {
        this.bannerList = res.data.photo;
        this.goods = res.data.goods;
        // console.log(this.bannerList);
      }
    },
    onClickLeft() {
      this.$router.back();
    },
    handlerScroll() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      top = Math.round(top);
      // console.log(top);
      if (top > 120) {
        this.opacityVal = 1;
        return;
      }
      this.opacityVal = top / 120;
    },
    onSelect(option) {
      if (option.icon === "link") {
        // 1,拿到地址栏网址
        const { href } = window.location;
        // 2,创建一个input属性
        const oInput = document.createElement("input");
        // 3,将href放入到oInput中
        oInput.value = href;
        // 4,将创建的元素追加到页面中
        document.body.appendChild(oInput);
        // 5,href全选
        oInput.select();
        // 6,执行拷贝命令
        document.execCommand("Copy");
        // 7,轻提示
        Toast.success("链接复制成功");
      }
      this.showShare = false;
    },

    isLogin() {
      console.log(this.login);
      if (!this.login) {
        Dialog.confirm({
          title: "温馨提示",
          message: "您还未登录账号，是否进行登录？",
          closeOnPopstate: false,
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
        return false;
      }
      return true;
    },
    toCart() {
      if (this.isLogin()) {
        this.$router.push("/dashboard/cart");
      }
    },

    addCart() {
      if (this.isLogin()) {
        if (!this.show) {
          this.show = true;
          return;
        }
        // console.log("添加到购物车");
        const { goodsId, nums } = this;
        // console.log(goodsId);

        this.addCartGoods({ goodsId, nums });
        Toast({
          message: "购物车添加成功",
          position: "bottom",
        });
        // this.show = false;
      }
    },
    cancel() {
      this.show = false;
    },
    reduce() {
      if (this.nums <= 1) {
        Toast.fail("商品数量需大于0");
        return;
      }
      this.nums--;
    },
    add() {
      if (this.nums >= 999) {
        Toast.fail("商品数量不足");
        return;
      }
      this.nums++;
    },
    //商品收藏/取消收藏
    async collect() {
      // console.log(this.isLogin());

      if (this.isLogin()) {
        const res = await (this.iscollect
          ? reqDelCollectApi(this.goodsId)
          : reqAddCollectApi(this.goodsId));
        if (res.code == 200) {
          this.iscollect = !this.iscollect;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.details {
  margin-bottom: 100px;
  width: 100%;
  // height: 2000px;
  .van-nav-bar {
    background-color: #08dbdb;
    /deep/.van-icon {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }
  .goodsTop {
    height: 48px;
    width: 48px;
    position: fixed;
    top: 20px;
    left: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    font-size: 48px;
    z-index: 999;
  }
  .banner {
    width: 100%;
    height: 100vw;
    // padding: 0 40px;
    box-sizing: border-box;
    // background: linear-gradient(#08dbdb 30%, #c3dbe0);
    // border: #000 solid 1px;
    .photo {
      width: 100%;
      height: 100%;
      display: flex;
      // border-radius: 20px;
      // border: #000 solid 1px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .van-swipe__indicator {
    background-color: #ccc;
    opacity: 0.5;
    width: 16px;
    height: 16px;
  }
  .goodsPrice {
    width: 100%;
    height: 100px;
    background-color: #08dbdb;
    padding-top: 20px;

    span {
      margin-left: 40px;
      // margin-top: 10px;
    }
    /deep/.currentPrice {
      font-size: 32px;
      margin-top: 30px;
      flex-wrap: 700;
      color: red;
    }
    .originalPrice {
      font-size: 20px;
      color: #666;
      b {
        font-weight: normal;
        text-decoration: line-through;
      }
    }
  }
  .goodsText {
    box-sizing: border-box;
    width: 100%;
    height: 140px;
    background-color: #fff;

    // border: #666 solid 1px;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .text {
      width: 600px;
      .goodsName {
        // height: 64px;
        line-height: 32px;
        font-size: 32px;
      }
      .goodsIntroduce {
        height: 32px;
        line-height: 32px;
        font-size: 32px;
      }
    }
    .share {
      height: 90px;
      width: 60px;
      border-left: #666 solid 5px;
      padding-left: 20px;
      // margin-top: px;
      // margin-right: 20px;

      .iconShare {
        font-size: 48px;
        color: #f90;
      }
      .textShare {
        font-size: 24px;
      }
    }
    .nums {
      width: 100%;
      height: 20px;
      // padding: 0 20px;
      display: flex;
      justify-content: space-between;
      // box-sizing: border-box;
      .store_nums {
        margin-right: 100px;
      }
    }
  }
  .comments {
    width: 100%;
    margin-top: 10px;
    height: 200px;
    overflow: scroll;
    // border: #08dbdb 1px solid;
    background-color: #fff;
    span {
      margin-left: 20px;
      font-size: 32px;
    }
    p {
      text-align: center;
      line-height: 150px;
      color: #666;
    }
  }
  .goodsInfo {
    background-color: #fff;
    margin-top: 10px;
    height: auto;
    width: 100%;
    p {
      text-align: center;
      font-size: 30px;
      flex-wrap: 600;
      margin-top: 10px;
    }
  }
  .footer {
    width: 100%;
    height: 100px;
    z-index: 3000;
    // background-color: #f90;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    /deep/.van-badge--fixed {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    div {
      width: 80px;
      height: 100%;
      text-align: center;
      span {
        font-size: 25px;
        color: #666;
      }
      .iconfont {
        font-size: 50px;
      }
      .icon-shoucang2 {
        color: #f00;
      }
    }
    .toHome {
      margin-left: 10px;
    }
    .select {
      width: 350px;
      height: 60px;
      border-radius: 40px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      border-radius: 40px;
      // background-color: #fff;
      overflow: hidden;

      span {
        width: 50%;
        font-size: 28px;
        height: 100%;
        line-height: 60px;
        color: rgb(234, 232, 231);
      }
      .addCart {
        background-color: #f90;
        // border: #08dbdb solid 1px;
      }
      .nowBuy {
        background-color: rgb(237, 91, 91);
      }
    }
  }
  .van-cell {
    display: none;
  }
  .van-papue {
    background-color: transparent;
  }
  .panel {
    width: 100%;
    height: 500px;
    border-radius: 20px;
    .cancel {
      display: flex;
      justify-content: right;
      .icon-chacha {
        margin-top: 10px;
        margin-right: 10px;
        color: #ccc;
      }
    }
    .goodsInfo {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-between;

      .goodsImg {
        // border: #08dbdb solid 1px;
        height: 250px;
        width: 300px;
        margin-left: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .price {
        margin-right: 250px;
        margin-top: 100px;
        span {
          font-size: 32px;
          color: #f00;
        }
        p {
          font-size: 20px;
          color: #ccc;
        }
      }
    }
    .nums {
      width: 100%;
      height: 70px;
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      p {
        margin-left: 20px;
        font-size: 30px;
        color: #666;
        height: 50px;
        line-height: 50px;
        margin-top: 10px;
      }
      .numstotal {
        // width: 276px;
        // border: #ccc 1px solid;
        font-size: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 20px;

        span {
          width: 50px;
          height: 50px;
          font-size: 30px;
          // border: #ccc 2px solid;
          text-align: center;
          line-height: 50px;
          color: #666;
        }
      }
    }
  }
}
</style>
